<template>
  <div class="attendanceCalendar-box">
    <nav-title title="考勤日历" :routerLink="routerLink"/>
    <!-- <div v-if="approved==0" class="attendanceCalendar-top">
      <div>
        <span></span>
        <span>年假剩余{{annualLeave}}天</span>
      </div>
      <div>
        <span></span>
        <span>年假剩余{{change}}天</span>
      </div>
    </div> -->
    <div v-if="(LeaveBalInfo.annDisplay == 'Y') || (LeaveBalInfo.adjDisplay == 'Y')" class="attendanceCalendar-top">
      <div v-if="LeaveBalInfo.annDisplay == 'Y' && LeaveBalInfo.annDays && ((LeaveBalInfo.annDays/1) > 0)">
        <span></span>
        <span>年假剩余{{LeaveBalInfo.annDays}}天</span>
      </div>
      <div v-if=" LeaveBalInfo.adjDisplay == 'Y' && LeaveBalInfo.adjDays && ((LeaveBalInfo.adjDays/1) > 0)">
        <span></span>
        <span>调休剩余{{LeaveBalInfo.adjDays}}天</span>
      </div>
    </div>
    <div class="attendanceCalendar">
      <div class="attendanceCalendar-date">
        <group>
          <datetime placeholder="请选择" v-model="selectMonth" @on-change="dateChange" format="YYYY年MM月"/>
        </group>
      </div>
      <div class="attendanceCalendar-Calendar">
          <table class="attendanceCalendar-Calendar-table">
            <thead>
              <tr>
                <th>日</th>
                <th>一</th>
                <th>二</th>
                <th>三</th>
                <th>四</th>
                <th>五</th>
                <th>六</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in daysArr">
                <td v-for="value in item" :class="[value.month ? value.date == activeDay ? 'thisMonth active':'thisMonth':'otherMonth']" @click="[value.month ? dayClick(value.date) :'']">
                  <div v-if="value.unusualList" class="unusualListBox">
                    <div v-for="val,index in value.unusualList" :class="value.className[index]">
                      <img :src="val" alt="" />
                    </div>
                  </div>
                  {{value.num}}
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      <div class="attendanceCalendar-shift">
        <div class="attendanceCalendar-shift-icon">
          <img src="./images/u2529.png" alt="">
        </div>
        <div class="attendanceCalendar-shift-content">
          <!-- <p>班次：控股正常班 08:30~17:00</p> -->
          <p v-if="AttendanceAnalysis">{{AttendanceAnalysis}}</p>
          <p v-else="">班次：无</p>
        </div>
      </div>
    </div>
    <div class="attendanceCalendar-interval"></div>
    <div class="attendanceCalendar-Attendance">
      <div class="attendanceCalendar-Attendance-icon">
        <img src="./images/u2530.png" alt="">
      </div>
      <div class="attendanceCalendar-Attendance-content">
        <p>出勤分析：</p>
        <div :style="'display:'+ (status.lave ? 'block;':'none;')">
          <div class="Attendance-qj">
            <img :src="imageUrl.lave" alt="">
          </div>
          <p>请假</p>
        </div>
        <div :style="'display:'+ (status.late ? 'block;':'none;')" >
          <div class="Attendance-cd">
            <img :src="imageUrl.late" alt="">
          </div>
          <p>迟到</p>
        </div>
        <div :style="'display:'+ (status.early ? 'block;':'none;')">
          <div class="Attendance-zt">
            <img :src="imageUrl.early" alt="">
          </div>
          <p>早退</p>
        </div>
        <div :style="'display:'+ (status.absent ? 'block;':'none;')">
          <div class="Attendance-kg">
            <img :src="imageUrl.absent" alt="">
          </div>
          <p>旷工</p>
        </div>
        <div :style="'display:'+(!status.lave && !status.late && !status.early && !status.absent ? 'block;':'none;')">
          <div class="Attendance-zc">
            <img src="./images/u2501.png" alt="">
          </div>
          <p>正常</p>
        </div>
      </div>
    </div>
    <div class="attendanceCalendar-interval"></div>
    <div class="attendanceCalendar-Signin-record">
      <div class="attendanceCalendar-Signin-record-icon">
        <img src="./images/u2531.png" alt="">
      </div>
      <div class="attendanceCalendar-Signin-record-content">
        <p>签到记录：</p>
        <div v-if="SignInRecord">
          <p v-for="value in SignInRecord">{{value.signTime}}</p>
          <!-- <p>2018-04-24   08:41 （上班卡）</p>
          <p>2018-04-24   22:41</p>
          <p>2018-04-25   00:41  （下班卡）</p> -->
        </div>
        <div v-else="">
          <p>无</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { getCalendar, getLeaveBalInfo, getCalendarDetail } from './../../api/api';
  import { Datetime, Group, dateFormat } from 'vux';
  import lave from './images/u2518.png';
  import late from './images/u2507.png';
  import early from './images/u2510.png';
  import absent from './images/u2504.png';
  import qs from 'qs';
  import moment from 'moment';
import { setTimeout } from 'timers';
  export default {
    name: 'AttendanceCalendar',
    components: {
      Datetime,
      Group,
      dateFormat,
    },
    created() {
      // this.approved = this.$route.query.approved;
      this.emplid = this.$route.query.emplid || this.$route.query.eplid;
      const year = this.selectMonth.split('年')[0];
      const month = this.selectMonth.split('年')[1].split('月')[0];
      this.getCalendarData(`${year}-${month}`);
      this.getDetailData();
      this.getMyLeaveBalInfo();
    },
    mounted() {},
    data() {
      return {
        emplid: '',
        imageUrl: {
          lave,
          late,
          early,
          absent,
        },
        status: {
          lave: false,
          late: false,
          early: false,
          absent: false,
        },
        AttendanceAnalysis: '', // 签到记录
        SignInRecord: [],
        routerLink: '',
        annualLeave: 6,
        LeaveBalInfo: {},
        change: 7,
        approved: 0,
        selectMonth: dateFormat(new Date(), 'YYYY年MM月'),
        daysArr: [],
        activeDay: moment().format('YYYY-MM-DD'),
        list: [],
      }
    },
    methods: {
      getCalendarData(dateMonth) {
        this.$vux.loading.show();
        getCalendar({dateMonth, emplid: this.emplid})
          .then((res)=>{
            this.$vux.loading.hide();
            if (res && res.retCode === '000000') {
              this.list = res.retData;
              this.daysArr = this.getMonthDay(`${dateMonth}-01`);
            } else {
              this.$vux.alert.show({
                title: '提示',
                content: res.retMsg,
              })
            }
          })
          .catch(res => {
            this.$vux.loading.hide();
            this.$vux.alert.show({
              title: '警告',
              content: '网络异常，请稍后重试'
            })
          })
      },
      getDetailData() {
        this.$vux.loading.show();
        const param = {
          emplid: this.emplid,
          dateDay: this.activeDay,
        }
        getCalendarDetail(param)
          .then((res)=>{
            if (res && res.retCode === '000000') {
              setTimeout(()=>{
                this.$vux.loading.hide();
              }, 300);
              this.AttendanceAnalysis = res.retData.className;
              this.SignInRecord = res.retData.signList;
              this.status.lave = false;
              this.status.late = false;
              this.status.early = false;
              this.status.absent = false;
              res.retData.unusualList && res.retData.unusualList.map((value)=>{
                switch (value) {
                  case 'lave':
                    this.status.lave = true;
                    break;
                  case 'late':
                    this.status.late = true;
                    break;
                  case 'early':
                    this.status.early = true;
                    break;
                  case 'absent':
                    this.status.absent = true;
                    break;
                  default:
                    break;
                }
              });
            } else {
              this.$vux.loading.hide();
              this.$vux.alert.show({
                title: '提示',
                content: res.retMsg,
              })
            }
          })
          .catch(res => {
            this.$vux.loading.hide();
            this.$vux.alert.show({
              title: '警告',
              content: '网络异常，请稍后重试'
            })
          })
      },
      getMyLeaveBalInfo() {
        getLeaveBalInfo({ emplid: this.emplid })
          .then(res => {
            if (res && res.retCode === "000000") {
              this.LeaveBalInfo = res.retData;
            } else {
              this.$vux.alert.show({
                title: "提示",
                content: res.retMsg
              });
            }
          })
          .catch(res => {
            this.$vux.alert.show({
              title: "警告",
              content: "网络异常，请稍后重试"
            });
          });
      },
      dateChange() {
        const year = this.selectMonth.split('年')[0];
        const month = this.selectMonth.split('年')[1].split('月')[0];
        this.getCalendarData(`${year}-${month}`);
        // this.daysArr = this.getMonthDay(`${year}-${month}`);
        this.activeDay = `${year}-${month}-01`;
        this.getDetailData();
      },
      dayClick(date) {
        if (this.activeDay == date) return;
        this.activeDay = date;
        this.getDetailData();
      },
      zeroFilling(num) {
        if (num >= 10) {
            return num;
        } else {
            return `0${num}`;
        }
      },
      getMonthDay(date) {
        const daysArr = [];
        const currentWeekday = moment(date).date(1).weekday(); // 获取当月1日为星期几
        const lastMonthDays = moment(date).month((moment(date).month()-1)).daysInMonth(); // 获取上月天数
        const currentMonthDays = moment(date).daysInMonth(); // 获取当月天数
        for (let i = 0; i < 6; i++) {
            let arr =[];
            let day = lastMonthDays - currentWeekday + (i*7);
            for (let j = 1; j <= 7; j++) {
                let newDay = day + j;
                let value = {};
                if (newDay <= lastMonthDays) {
                    value={
                        num: newDay,
                        date: `${moment(date).month((moment(date).month()-1)).format('YYYY-MM')}-${this.zeroFilling(newDay)}`,
                    };
                } else if (newDay-lastMonthDays <= currentMonthDays) {
                    value = {
                        num: newDay-lastMonthDays,
                        date: `${moment(date).format('YYYY-MM')}-${this.zeroFilling(newDay-lastMonthDays)}`,
                        month: 'thisMonth',
                    };
                } else {
                    value = {
                        num: newDay-lastMonthDays-currentMonthDays,
                        date: `${moment(date).month((moment(date).month()+1)).format('YYYY-MM')}-${this.zeroFilling(newDay-lastMonthDays-currentMonthDays)}`,
                    };
                }
                this.list.map((res)=>{
                  if (res.dateDay == value.date) {
                    let arr = [];
                    let className = [];
                    res.unusualList.map((item)=>{
                      switch (item) {
                        case 'lave':
                          arr.push(this.imageUrl.lave);
                          className.push('lave');
                          break;
                        case 'late':
                          arr.push(this.imageUrl.late);
                          className.push('late');
                          break;
                        case 'early':
                          arr.push(this.imageUrl.early);
                          className.push('early');
                          break;
                        case 'absent':
                          arr.push(this.imageUrl.absent);
                          className.push('absent');
                          break;
                        default:
                          break;
                      }
                    })
                    value.unusualList = arr;
                    value.className = className;
                  }
                });
                arr.push(value);
            }
            daysArr.push(arr);
        }
        if (daysArr[daysArr.length-1][0].num <= 7) daysArr.pop();
        return daysArr;
      }
    }
  }
</script>

<style type="text/scss" lang="scss">
  // @import '../../styles/staff.scss';
  .attendanceCalendar-box{
    .attendanceCalendar-top {
      width: 100%;
      height: 20px;
      >div{
        float: left;
        width: 50%;
        text-align: left;
        padding-left: 15px;
        height: 20px;
        span{
          line-height: 20px;
        }
        >span:nth-child(1){
          display: inline-block;
          width: 8px;
          height: 8px;
          background-color: #ff9224;
          border-radius: 50%;
          margin: 5px 0 3px;
        }
        >span:nth-child(2){
          font-weight: bold;
          font-size: 18px;
        }
      }
    }
    .attendanceCalendar{
      height: 100%;
      margin-top: 15px;
      .attendanceCalendar-date{
        height: 40px;
        background-color: rgba(28, 170, 254, 1);
        .weui-cells{
          width: 130px;
          background-color: transparent;
          margin: 0 auto;
          line-height: 40px;
          box-sizing: border-box;
          .weui-cell{
            padding: 0;
          }
          .weui-cell__ft{
            padding: 0;
            text-align: center;
            .vux-cell-value{
              font-size: 18px !important;
              color: #fff !important;
              background-color: #1493c9 !important;
              display: inline-block;
              line-height: 30px;
              width: 130px;
              border-radius: 6px;
              background: url('./images/u2407.png') right 6px no-repeat;
              background-size: 20px;
            }
            &::after {
              content: none;
            }
          }
        }
      }
      .attendanceCalendar-Calendar{
        width: 100%;
        padding: 0 2px;
        .attendanceCalendar-Calendar-table{
          width: 100%;
          border-top: 1px solid #ccc;
          border-left: 1px solid #ccc;
          th, td {
            border-bottom: 1px solid #ccc;
            border-right: 1px solid #ccc;
            line-height: 42px;
            font-size: 16px;
          }
          tr{
            td:first-child,
            td:last-child{
              color: #990000;
            }
            td.otherMonth{
              color: #ccc;
            }
            td{
              position: relative;
              >.unusualListBox{
                position: absolute;
                top: 0;
                display: flex;
                width: 100%;
                >div{
                  // vertical-align: top;
                  // display: inline-block;
                  // float: left;
                  // width: 16px;
                  width: 25%;
                  height: 14px;
                  border-radius: 50%;
                  padding-top: 1px;
                  >img{
                    width: 12px;
                    height: 12px;
                    vertical-align: top;
                  }
                  &.lave {
                    background-color: #3397fd;
                  }
                  &.late {
                    background-color: #ffcc00;
                  }
                  &.early {
                    background: #ffcc00;
                  }
                  &.absent {
                    background-color: #ff9224;
                  }
                }
                // >div:nth-child(2){
                //   margin-left: -5px;
                // }
                // >div:nth-child(3){
                //   margin-left: -5px;
                // }
                // >div:nth-child(4){
                //   margin-left: -5px;
                // }
              }
            }
            .active{
              background-color: #ffe1c4;
            }
          }
        }
      }
      .attendanceCalendar-shift{
        width: 100%;
        height: 100%;
        height: 45px;
        padding: 10px;
        >div{
          float: left;
        }
        .attendanceCalendar-shift-icon{
          width: 10%;
        }
        .attendanceCalendar-shift-content{
          width: 90%;
          >p{
            text-align: left;
            padding-left: 10px;
            font-size: 16px;
          }
        }
      }
    }
    .attendanceCalendar-interval{
      width: 100%;
      height: 4px;
      background: #eee;
    }
    .attendanceCalendar-Attendance{
      width: 100%;
      height: 100%;
      height: 100px;
      padding: 10px;
      >div{
        float: left;
      }
      .attendanceCalendar-Attendance-icon{
        width: 10%;
      }
      .attendanceCalendar-Attendance-content{
        width: 90%;
        >p{
          text-align: left;
          padding-left: 10px;
          font-size: 16px;
        }
        >div{
          float: left;
          padding: 5px;
          margin: 0 10px;
          >div {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            img{
              width: 20px;
              height: 20px;
              margin-top: 5px;
            }
          }
          .Attendance-qj {
            background-color: #3397fd;
          }
          .Attendance-cd {
            background-color: #ffcc00;
          }
          .Attendance-zt {
            background-color: #ffcc00;
          }
          .Attendance-kg {
            background-color: #ff9224;
          }
          .Attendance-zc {
            background-color: #07bc4b;
          }
          >p{
              line-height: 1.8;
            }
        }
      }
    }
    .attendanceCalendar-Signin-record{
      width: 100%;
      height: 100%;
      height: 100px;
      padding: 10px;
      >div{
        float: left;
      }
      .attendanceCalendar-Signin-record-icon{
        width: 10%;
      }
      .attendanceCalendar-Signin-record-content{
        width: 90%;
        >p{
          text-align: left;
          padding-left: 10px;
          font-size: 16px;
        }
        >div{
          p{
            text-align: left;
            font-size: 16px;
            line-height: 1.8;
          }
        }
      }
    }
  }
</style>
